<template>
  <view class="container">
    <uv-navbar title="选择店铺" leftIconColor="#fff" autoBack bgColor="rgba(0,0,0,0)" :title-style="{'color':'#fff'}" placeholder></uv-navbar>
    <view class="main">
      <view style="display: flex;flex-direction: column;align-items: center;">
        <view class="title">
          你还未注册店铺
        </view>
        <view class="desc">
          欢迎加入品好生活，成为千万商家之一
        </view>
        <image class="zhuce_logo" src="/static/images/zhuce_logo.png" mode=""></image>
      </view>
      <view class="from-warp">
        <view class="from-warp-title">
          现在享免费入驻
        </view>
        <view class="from-warp-linner">
          <view class="from-warp-linner-item" v-for="(item, index) in ruzhuList" :key="index">
            <image class="ruzhu_icon" :src="item.url" mode=""></image>
            <view class="ruzhu_label">
              {{item.label}}
            </view>
          </view>
        </view>
        <view class="from-warp-btn" @click="ruzhu">
          立即入驻
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        ruzhuList: [
          {
            url: "/static/images/z1.png",
            label: "0元入驻"
          },
          {
            url: "/static/images/z2.png",
            label: "引流拓客"
          },
          {
            url: "/static/images/z3.png",
            label: "精准用户"
          }
        ]
      }
    },
    methods: {
      ruzhu(){
        uni.navigateTo({
          url: "/pages/login/openShop"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    height: 100vh;
    background: linear-gradient( 180deg, #EA7222 0%, rgba(234,214,34,0) 100%);
    position: relative;
    padding: 88rpx 30rpx;
    box-sizing: border-box;
    .main{
      .title{
        font-weight: bold;
        font-size: 40rpx;
        color: #FFFFFF;
        margin-top: 30rpx;
      }
      .desc{
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
        opacity: .9;
        margin-top: 26rpx;
      }
      .zhuce_logo{
        width: 180rpx;
        height: 118rpx;
        margin-top: 32rpx;
      }
      .from-warp{
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 30rpx 0rpx #EA7222;
        border-radius: 60rpx;
        padding: 44rpx 72rpx 56rpx 72rpx;
        box-sizing: border-box;
        margin-top: 60rpx;
        .from-warp-title{
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
          text-align: center;
        }
        .from-warp-linner{
          display: flex;
          justify-content: space-between;
          margin-top: 50rpx;
          .from-warp-linner-item{
            display: flex;
            flex-direction: column;
            align-items: center;
            .ruzhu_icon{
              width: 116rpx;
              height: 116rpx;
            }
            .ruzhu_label{
              font-weight: 400;
              font-size: 24rpx;
              color: #666666;
              margin-top: 30rpx;
            }
          }
        }
        .from-warp-btn{
          width: 100%;
          height: 88rpx;
          background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
          box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244,88,33,0.2);
          border-radius: 48rpx;
          margin-top: 60rpx;
          font-weight: bold;
          font-size: 32rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 88rpx;
        }
      }
      
    }
  }
</style>